<%@page contentType="text/html; charset=UTF-8" %>
<%@include file="/WEB-INF/jsp/init.jsp" %>

<!-- 导入交易的模态窗口 -->
<%@include file="/WEB-INF/jsp/inc/dialog/importExcel.jsp" %>

<div class="page-header">
    <h3>交易列表</h3>
</div>

<!-- 搜索表单 -->
<div class="btn-toolbar" role="toolbar" style="margin-left: 0;margin-top:-10px;">
    <form id="searchForm" action="/tran/getPage" class="form-inline" role="form">
        <%--第几页--%>
        <input type="hidden" name="currentPage" />
        <%--每页显示多少条--%>
        <input type="hidden" name="rowsPerPage" />

        <div class="input-group searchItem">
            <div class="input-group-addon">所有者</div>
            <input name="owner" class="form-control" type="text">
        </div>

        <div class="input-group searchItem">
            <div class="input-group-addon">名称</div>
            <input name="name" class="form-control" type="text">
        </div>

        <div class="input-group searchItem">
            <div class="input-group-addon">客户名称</div>
            <input name="customerName" class="form-control" type="text">
        </div>

        <div class="input-group searchItem">
            <div class="input-group-addon">阶段</div>
            <select name="stage" options="stage" class="form-control">
                <option></option>
            </select>
        </div>

        <div class="input-group searchItem">
            <div class="input-group-addon">类型</div>
            <select name="type" options="transactionType" class="form-control">
                <option></option>
            </select>
        </div>

        <div class="input-group searchItem">
            <div class="input-group-addon">来源</div>
            <select name="source" options="source" class="form-control" id="create-clueSource">
                <option></option>
            </select>
        </div>

        <div class="input-group searchItem">
            <div class="input-group-addon">联系人名称</div>
            <input name="contactName" class="form-control" type="text">
        </div>
        <div class="input-group searchItem">
            <button type="submit" class="btn btn-default">查询</button>
        </div>
    </form>
</div>

<!-- 操作按钮 -->
<div class="btn-toolbar" role="toolbar" style="height: 50px;margin-top:20px;">
    <div class="btn-group">
        <button class="btn btn-primary" url="transaction/save.html"><span class="glyphicon glyphicon-plus"></span> 创建
        </button>
        <button class="btn btn-default" url="transaction/edit.html"><span class="glyphicon glyphicon-pencil"></span> 修改
        </button>
        <button class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default" data-toggle="modal" data-target="#importModal"><span
                class="glyphicon glyphicon-import"></span> 导入
        </button>
        <button class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 导出</button>
    </div>
</div>

<div>
    <table class="table table-hover table-striped">
        <thead>
        <tr style="background-color:#d9edf7">
            <th><input type="checkbox"/></th>
            <th>名称</th>
            <th>客户名称</th>
            <th>阶段</th>
            <th>类型</th>
            <th>所有者</th>
            <th>来源</th>
            <th>联系人名称</th>
        </tr>
        </thead>
        <tbody id="dataBody"></tbody>
    </table>
</div>

<!--分页-->
<%--<%@include file="/WEB-INF/jsp/inc/pager.jsp"%>--%>
<div id="pageDiv"></div>

<script>
    jQuery(function ($) {
        $("#searchForm").ajaxForm(function (page) {
            let html = "";
            for (let t of page.data) {
                html += `<tr>
							<td><input name="id" value='${"${t.id}"}' type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" url="/transaction/detail.html?id=${"${t.id}"}">${"${t.name}"}</a></td>
							<td>${"${t.customer.name}"}</td>
							<td>${"${t.stage}"}</td>
							<td>${"${t.type}"}</td>
							<td>${"${t.owner}"}</td>
							<td>${"${t.source}"}</td>
							<td>${"${t.contact.fullName}"}</td>
						</tr>`;
            }
            $("#dataBody").html(html);

            // 初始化分页查询件，page：后端返回的分页对象
            $("#pageDiv").bs_pagination({
                currentPage: page.currentPage,          // 页码
                rowsPerPage: page.rowsPerPage,          // 每页显示的记录条数
                maxRowsPerPage: page.maxRowsPerPage,    // 每页最多显示的记录条数
                totalRows: page.totalRows,              // 总记录数
                totalPages: page.totalPages,            // 总页数
                visiblePageLinks: page.visiblePageLinks,// 显示几个卡片
                // 当前页发生改变时执行的函数
                onChangePage: function (event, data) {
                    // 将当前页和每页显示条数添加到查询表单的隐藏域中，然后提交表单
                    $("#searchForm :input[name=currentPage]").val(data.currentPage);
                    $("#searchForm :input[name=rowsPerPage]").val(data.rowsPerPage);
                    $("#searchForm").submit();
                }
            });
        }).submit();
        console.log(new Date());
    })
</script>